import React, { Component } from 'react'
import style from './style.less'
import { Link } from 'react-router-dom'
import Layout from '../Wrap'
import store from 'store'
import {connect} from 'react-redux'
import SearchModule from '../../components/SearchModule'
import TableHeaderClient from '../../components/TableHeaderClient'
import ContentWrap from '../Content'
import { createForm } from 'rc-form'
import { Table, Button, message, Switch, Input, Select, Icon } from 'antd'
import {getClientList} from '../../actions/clientSystem'
import F from '../../helper/tool'
import {
  selectKey,
  deleteSelect,
} from '../../actions/search'
// import {queryAutoPoolRule} from '../../actions/internationRule'
// const { toContentState } = Mention
const {Wrap} = Layout
const Option = Select.Option
const queryList = store.get('crm:queryList')

@connect((state) => {
  return {
    search: state.search,
    clientSystem: state.clientSystem,
    heiQueryData: state.search.queryData,
    queryBest: state.search.queryBest,
    queryHeiBest: state.search.queryHeiBest,
  }
})
@createForm()
class ClientSystem extends Component {
  constructor(props) {
    super(props)
    this.outValues = {} // 搜索条件
    this.auditID = [] // 启用禁用的id
  }

  state = {
    visible: false,
    value: 2,
  }

  columns = [{
    title: '客户编号',
    dataIndex: 'number',
  }, {
    title: '客户名称',
    dataIndex: 'name',
  }, {
    title: '客户类型',
    dataIndex: 'type',
    render: (text, record) => {
      if (record.type === 1) {
        return <span>个人客户</span>
      }
      if (record.type === 2) {
        return <span>企业客户</span>
      }
    },
  }, {
    title: '所属行业',
    dataIndex: 'dictName',
  }, {
    title: '跟进人',
    dataIndex: 'fName',
  }, {
    title: '跟进状态',
    dataIndex: 'status',
  }, {
    title: '最近跟进方式',
    dataIndex: 'fType',
    render: (text, record) => {
      if (record.fType === 1) {
        return <span>电话</span>
      }
      if (record.fType === 2) {
        return <span>微信</span>
      }
      if (record.fType === 3) {
        return <span>QQ</span>
      }
      if (record.fType === 4) {
        return <span>面谈</span>
      }
      if (record.fType === 5) {
        return <span>邮箱</span>
      }
      if (record.fType === 6) {
        return <span>延期</span>
      }
    },
  }, {
    title: '最近跟进时间',
    dataIndex: 'fTime',
  }, {
    title: '状态',
    dataIndex: 'isEnable',
    render: (text, record) => {
      if (record.isEnable === 0) {
        return <span>正常</span>
      }
      if (record.isEnable === 1) {
        return <span>冷冻</span>
      }
    },
  }]

  start = () => {
    this.setState({ loading: true })
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false,
      })
    }, 1000)
  }

  onSelectChange = (key, data) => { // 勾选表格
    console.log(data.length)
    data.map((item, index) => {
      // item.length === index ? number += item.number : number += item.number + ','
      const poolId = item.id
      this.poolId = poolId
      this.dataLength = data.length
      return {}
    })
    this.props.dispatch(selectKey(key))
    // this.props.dispatch(selectPoolId(key))
  }

  assignMent = () => {
    console.log('分配')
  }

  freeZing = () => {
    console.log('冷冻')
  }

  recoVery = () => {
    console.log('恢复')
  }

  renderHeaser = () => { // 表格头部
    return (
      <TableHeaderClient assignMent={this.assignMent} freeZing={this.freeZing} recoVery={this.recoVery} />
    )
  }

  onChangeEnable = (id,status) => {
    const { page } = this.props.clientSystem
    // console.log(`switch to ${checked}`)
    console.log(status)
    const params={
      "id":id,
      "status":status,
    }
    // this.props.dispatch(updatePoolEnable({...params})).then(data => {
    //   if (data) {
    //     message.success(data.msg)
    //     this.props.dispatch(getClientList({
    //       pageNum: page.pageNum,
    //       pageSize: page.pageSize,
    //     }))
    //   }
    // })
  }

  // handleQueryBest = (value) => { // 初级查询
  //   const { page } = this.props.clientSystem
  //   const ss = F.filterUndefind(value)
  //   this.queryCondition = ss
  //   this.props.dispatch(getClientList({
  //     pageNum: page.pageNum,
  //     pageSize: page.pageSize,
  //     ...ss,
  //   }))
  // }

  handleQuery = () => { // 基本搜索
    const { page } = this.props.clientSystem
    this.props.form.validateFields((err, value) => {
      console.log(value)
      if(err) return
      const upData = F.filterUndefind(value)
      const outValues = {
        ...upData,
      }
      this.props.dispatch(getClientList({
        pageNum: page.pageNum,
        pageSize: page.pageSize,
        ...outValues,
      }))
      this.outValues = outValues
    })
  }

  onShowSizeChange = (pageNum, pageSize) => { // 点击每页显示个数
    this.props.dispatch(getClientList({
      pageNum,
      pageSize,
      ...this.outValues,
    }))
  }

  pageChange = (pageNum, pageSize) => { // 点击页数
    console.log(this.name)
    console.log(this.status)
    this.props.dispatch(getClientList({
      pageNum,
      pageSize,
      ...this.outValues,
    }))
  }

  componentDidMount() {
    const { page } = this.props.clientSystem
    this.props.dispatch(getClientList({ // 初始化lis
      pageNum: page.pageNum,
      pageSize: page.pageSize,
    }))
  }

  componentWillUnmount() {
    this.props.dispatch(deleteSelect)
  }

  render() {
    const [exIndustryType,department] = [queryList.exIndustryType,queryList.department]
    console.log(exIndustryType, department)
    const { queryBest } = this.props
    const { queryHeiBest, heiQueryData, columns } = this.state

    const { getFieldProps,getFieldDecorator } = this.props.form // getFieldError
    const { list, page, loading} = this.props.clientSystem // count, feadBack
    console.log(list)
    const { selectedRowKeys } = this.props.search
    // console.log(remark)
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    }
    let pagination = {
      onChange: this.pageChange,
      onShowSizeChange: this.onShowSizeChange,
      total: page.total,
      defaultCurrent: page.pageNum,
      pageSize: page.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
    }
    return (
      <Layout>
        <Wrap>
          <SearchModule
            showHeiBtn
            handleQueryBest={this.handleQueryBest}
            handleHeiQuery={this.handleHeiQuery}
            saveUserCheck={this.saveUserCheck}
            sortTable={this.sortTable}
            queryBest={queryBest}
            queryHeiBest={queryHeiBest}
            heiQueryData={heiQueryData}
          />
          <div className={style.MyClueWrap}>
            <ContentWrap style={{ borderTop: 'none' }}>
              <div className={style.listHeader}>
                <div className={style.listTitle}>
                  <div>
                    <Icon type="search" className={style.search} />
                    &ensp;筛选查询
                  </div>
                </div>
                <div className={style.listTop}>
                  <div className={style.formGroup}>
                    <div>
                      <Input style={{ width: 220 }} {...getFieldProps('name')} placeholder="请输入客户名称" />
                    </div>
                  </div>
                  <div className={style.formGroup}>
                    <div>
                      <Select
                        showSearch
                        placeholder="请选择所属行业"
                        optionFilterProp="children"
                        {...getFieldDecorator('dictName')}
                        style={{ width: 120 }}
                        onChange={this.handleChange}
                        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                      >
                        {
                          exIndustryType.map((d, i) => {
                            return (
                              <Option key={i} value={d.id}>{d.dictName}</Option>
                            )
                          })
                        }
                      </Select>
                    </div>
                  </div>
                  <div className={style.formGroup}>
                    <div>
                      <Select
                        showSearch
                        placeholder="请选择部门"
                        {...getFieldProps('depCode')}
                        optionFilterProp="children"
                        style={{ width: 120 }}
                        onChange={this.handleChange}
                        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                      >
                        {
                          department.map((d, i) => {
                            return (
                              <Option key={i}>{d.departmentName}</Option>
                            )
                          })
                        }
                      </Select>
                    </div>
                  </div>
                  <div className={style.formGroup}>
                    <div>
                      <Input style={{ width: 220 }} {...getFieldProps('userName')} placeholder="请填写所属人" />
                    </div>
                  </div>
                  <div>
                    <Button onClick={this.handleQuery}>搜索</Button>
                  </div>
                </div>
              </div>
              <Table
                loading={loading}
                title={this.renderHeaser}
                className={style.table}
                rowSelection={rowSelection}
                columns={this.columns}
                dataSource={list}
                pagination={pagination}
              />
            </ContentWrap>
          </div>
        </Wrap>
      </Layout>
    )
    // console.log(this.props)
  }
}

export default ClientSystem
